<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="库存资料" name="four" lazy>
        <goodWare :data="wareData" />
      </el-tab-pane>
      <el-tab-pane label="入库记录" name="first" lazy>
        <goodIn :data="inData" />
      </el-tab-pane>

      <el-tab-pane label="出库记录" name="second" lazy>
        <goodOut :data="outData" />
      </el-tab-pane>

      <el-tab-pane label="盘点记录" name="third" lazy>
        <goodAsking :data="askingData" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import goodIn from '@/components/modules/good-in.vue'
import goodOut from '@/components/modules/good-out.vue'
import goodAsking from '@/components/modules/good-asking.vue'
import goodWare from '@/components/modules/good-ware.vue'
import { ref, watchEffect } from 'vue'
import { getProductRecord, getcpzlsubApi } from '@/api/dataQuery'

const activeName = ref('first')

const inData = ref([])
const outData = ref([])
const askingData = ref([])
const wareData = ref([])

const props = defineProps({
  ProdID: {
    type: String,
    required: true
  }
})

watchEffect(() => {
  activeName.value = 'four'

  getProductRecord({ orderID: props.ProdID }).then(({ data: { data1, data2, data3 } }) => {
    inData.value = data1
    outData.value = data2
    askingData.value = data3
  })

  getcpzlsubApi({ ProdID: props.ProdID }).then(({ data }) => {
    wareData.value = data
  })
})
</script>

<style scoped lang="scss"></style>
